<template>
  <Tabs type="editable-card" @edit="onEdit" v-model:activeKey="activeKey">
    <TabPane v-for="(item, index) in paneList" :key="item.id">
      <template #tab>
        <span>
          <DesktopOutlined />
          <span> ({{ index + 1 }}) </span>
          <span>{{ item.tab }}</span>
        </span>
      </template>
      <div class="ip">IP:101.43.172.43</div>
      <div class="shell">
        <Xterm />
      </div>
    </TabPane>
  </Tabs>
  <Modal v-model:open="visible" title="主机列表" :footer="false">
    <div class="list">
      <div class="list_item" v-for="item in 10" :key="item">
        <DesktopOutlined />
        <span class="type">数据库</span>
        <span>(101.43.172.43)</span>
        <div class="right">
          <Tooltip placement="top">
            <template #title>打开SSH</template>
            <Button
              :icon="h(LinkOutlined)"
              type="link"
              @click="onOpen(item)"
            ></Button>
          </Tooltip>
        </div>
      </div>
    </div>
  </Modal>
</template>

<script setup lang="ts">
import { h, nextTick, ref, watch } from 'vue';
import { DesktopOutlined, LinkOutlined } from '@ant-design/icons-vue';
import { Button, Modal, TabPane, Tabs, Tooltip } from 'ant-design-vue';
import Xterm from '@/components/xterm/index.vue';

const visible = ref(false);
const onOpen = (item) => {
  const index = paneList.value.findIndex((i) => i.id === item);
  if (index === -1) {
    paneList.value.push({
      id: item,
      tab: '数据库',
    });
  }
  visible.value = false;
};
const onEdit = (targetKey, action) => {
  console.log(targetKey, 'targetKey');
  console.log(action, 'action');
  if (action === 'remove') {
    const index = paneList.value.findIndex((i) => i.id === targetKey);
    paneList.value.splice(index, 1);
    activeKey.value = 1;
  } else {
    visible.value = true;
  }
};

const activeKey = ref(1);
const paneList = defineModel('shellList', { type: Array, default: () => [] });

watch(
  () => paneList.value,
  (val) => {
    nextTick(() => {
      activeKey.value = paneList.value[paneList.value.length - 1].id;
    });
  },
  { deep: true, immediate: true },
);
</script>

<style scoped lang="scss">
.ip {
  height: 30px;
  line-height: 30px;
  padding-left: 10px;
  background-color: rgba(50, 53, 56);
}
.shell {
  height: calc(100vh - 245px);
}
:deep(.ant-tabs-nav) {
  .ant-tabs-tab.ant-tabs-tab-active {
    background: rgba(120, 94, 7) !important;
  }
  .ant-tabs-nav-list {
    .ant-tabs-tab {
      &:first-child {
        &::after {
          display: block !important;
        }
        .ant-tabs-tab-remove {
          display: block !important;
        }
      }
    }
  }
}
.list {
  &_item {
    position: relative;
    padding: 15px;
    border-bottom: 1px solid #ccc;
    cursor: pointer;
    &:hover {
      background-color: rgba(59, 59, 60);
      .right {
        opacity: 1;
      }
    }
    .type {
      margin: 0 20px;
    }
    .right {
      position: absolute;
      right: 50px;
      top: 50%;
      transform: translateY(-50%);
      opacity: 0;
    }
  }
}
</style>
